<template>
  <div>
      
      <el-row>
        <el-col :span="6">
              <el-input placeholder="请输入布局文件名" v-model="layoutName" clearable >
                  <el-button  slot="append" type="primary"  @click="createLinearLayout">创建LinearLayout根布局文件</el-button>
              </el-input>
        </el-col>
      </el-row>

       <el-row style="margin-top : 10px">
        <el-col :span="6">
             <el-button type="primary"  @click="createViewIdInCode">根据View的ID生成FindViewById</el-button>
        </el-col>
      </el-row>

      <!-- 搜索 -->
      <el-row style="margin-top : 10px">
        <el-col :span="6">
          <el-input placeholder="请输入搜索文件名" v-model="inputContent" clearable @clear="startSearch" @input='inputChange'>
            <el-button  slot="append" type="info" @click="startSearch">显示布局文件列表</el-button>
          </el-input>
          <div>
            已选中布局：{{this.currentSelectedFile.fileName}}
          </div>
        </el-col>
        <el-col :span="6" style="margin-left : 20px">
          <div>
             <el-input placeholder="请输入布局关联的路径" v-model="inputLayoutRelatePath" clearable @clear="startSearch" @input='onRelatePathChange' >
                 
             </el-input>
          </div>
          <el-input placeholder="请输入搜索文件名" v-model="inputCodeFileName" clearable @clear="showCodeFiles" @input='inputCodeFileChange'>
            <el-button  slot="append" type="info" @click="showCodeFiles">显示代码文件列表</el-button>
          </el-input>
          <div>
              已选中代码文件：{{this.currentSelectedCodeFile.fileName}}
          </div>
        </el-col>
      </el-row>

       <el-row style="margin-top : 10px">
        <el-col :span="6">
          <el-table ref="layoutTable" :data="files" border stripe highlight-current-row   @current-change="(val)=>handleCurrentChange(val, 1)">
            <el-table-column type="index"></el-table-column>
            <el-table-column label="文件名" prop="fileName"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="6">
          <el-table  :data="codeFiles" border stripe highlight-current-row   @current-change="(val)=>handleCurrentChange(val, 2)">
            <el-table-column type="index"></el-table-column>
            <el-table-column label="文件名" prop="fileName"></el-table-column>
          </el-table>
        </el-col>
      </el-row>

     
      
  </div>
</template>

<script>
export default {
  data() {
    return {
        projectAttr:{
            projectPath : '',
            layoutPath : "/app/src/main/res/layout"
        },
        inputCodeFileName:'',
        inputLayoutRelatePath:'',
        inputContent:"",
         files: [],
         codeFiles:[],
         layoutName : '',
         currentSelectedFile:{
            fileName :'',
            filePath :''
         },
         currentSelectedCodeFile:{
            fileName :'',
            filePath :''
         }
    }
  },
   created() {
      //取出项目的根路径
      var storage = window.sessionStorage
      var projectPath = storage.getItem("projectPath"); 
      if(projectPath){
        this.projectAttr.projectPath = projectPath
      }
      console.log(projectPath)
      if(projectPath){
        this.startSearch()
      }

      var LayoutRelatePath = storage.getItem("LayoutRelatePath"); 
      if(LayoutRelatePath){
        this.inputLayoutRelatePath = LayoutRelatePath
        this.showCodeFiles()
      }
    
      
  },
   methods: {
     onRelatePathChange(){
        window.sessionStorage.setItem("LayoutRelatePath",this.inputLayoutRelatePath)
     },
    async createViewIdInCode(){
          if(!this.currentSelectedFile.filePath){
             return  this.$message.error("请选择布局文件")
          }
          if(!this.currentSelectedCodeFile.filePath){
             return  this.$message.error("请选择代码文件")
          }
        const {data} = await this.$http.get('/updateIdToCode', {
              params: {
                "layoutPath":this.currentSelectedFile.filePath,
                "codePath":this.currentSelectedCodeFile.filePath
              }
          })
          this.$commonMsg(data)
     },
     
    async startSearch() {
             const {data} = await this.$http.get('/getLayoutFiles')
            var tmpData = data.data;
          this.files = [];
          if(this.inputContent){
                for(var j = 0; j <  tmpData.length; j++) {
                      
                      if(tmpData[j].fileName.search(new RegExp(this.inputContent, 'i')) != -1){
                  
                        this.files.push(tmpData[j]);
                      }
                  }
                  console.log(this.files)
          }else{
              this.files = tmpData;
          }
     
   }
   ,
   async showCodeFiles() {
          if(!this.inputLayoutRelatePath){
              return  this.$message.error("请输入布局的关联路径")
          }
          // const select = this.currentSelectedFile.filePath;
          //  console.log("dadfa")
          // console.log(select)
             const {data} = await this.$http.get('/showCodeFiles', {
                  params: {
                    "codePath":this.inputLayoutRelatePath
                  }
             })
            var tmpData = data.data;
          this.codeFiles = [];
      
          if(this.inputCodeFileName){
                for(var j = 0; j <  tmpData.length; j++) {
                      
                      if(tmpData[j].fileName.search(new RegExp(this.inputCodeFileName, 'i')) != -1){
                  
                        this.codeFiles.push(tmpData[j]);
                      }
                  }
          }else{
              this.codeFiles = tmpData;
          }
     
   },
   handleCurrentChange(val,type) {
          if(!val){
            return
          }
        if(type == 1){
          this.currentSelectedFile.fileName = val.fileName;
          this.currentSelectedFile.filePath = val.filePath;
        }else if(type == 2){
          this.currentSelectedCodeFile.fileName = val.fileName;
          this.currentSelectedCodeFile.filePath = val.filePath;
        }
        
      },
    inputChange(val) {
        this.startSearch();
     },
     inputCodeFileChange(val){

        this.showCodeFiles();
     },
     saveProjectPath(val) {
        var storage = window.sessionStorage
        storage.setItem("projectPath",val)
        console.log(val)
     },
     async createLinearLayout(){
            const {data} = await this.$http.get('/createLinearLayout', {
                  params: {
                    "fileName":this.layoutName
                  }
             })
             this.$message.error(data.uiMessage);
           
           
     }
      
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
